import React, { Component } from 'react';
import { Modal, Form, message, Radio, Input } from 'antd';

const FormItem = Form.Item;
const RadioGroup = Radio.Group;
export default class EditRole extends Component {
  submit = () => {
    this.props.form.validateFields((err, values) => {
      if (!err) {
        const { roleId } = this.props.roleRecord;
        //console.log('Received values of form: ', values, roleId);
        this.props.dispatch({
          type: 'role/edit',
          payload: {
            roleId,
            roleType: values.roleIndex,
            roleName: values.editName,
            remark: values.roleDiscrip,
          },
          callback: () => {
            message.success('编辑角色信息成功！');
            this.props.dispatch({
              type: 'role/fetch',
            });
            this.props.dispatch({
              type: 'role/fetchName',
            });
            this.props.handleModalVisible(false);
          },
        });
      }
    });
  };

  render() {
    const { modalVisible, handleModalVisible, form, roleRecord } = this.props;
    //console.log('role', roleRecord)
    const { getFieldDecorator } = form;
    let { roleType, roleName, roleDiscrip } = roleRecord;
    let roleIndex = roleType === '监管部门' ? 1 : 2;
    return (
      <Modal
        title="编辑角色信息"
        visible={modalVisible}
        onOk={this.submit}
        onCancel={() => handleModalVisible(false)}
      >
        <Form>
          <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="角色类型">
            {getFieldDecorator('roleIndex', {
              initialValue: roleIndex,
              rules: [{ required: true, message: '请选择角色类型...' }],
            })(
              <RadioGroup>
                <Radio value={1}>监管部门</Radio>
                <Radio value={2}>企业</Radio>
              </RadioGroup>
            )}
          </FormItem>
          <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="角色名称">
            {getFieldDecorator('editName', {
              initialValue: roleName,
              rules: [
                {
                  required: true,
                  message: '请勿使用特殊字符',
                  pattern: RegExp('^[\u4e00-\u9fa5_a-zA-Z0-9]+$'),
                },
              ],
            })(<Input placeholder="请使用汉字、字母和数字" />)}
          </FormItem>
          <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="备注">
            {getFieldDecorator('roleDiscrip', {
              initialValue: roleDiscrip,
            })(<Input placeholder="请输入备注" />)}
          </FormItem>
        </Form>
      </Modal>
    );
  }
}
